import React from 'react';
import { Form, Input, Select } from 'antd';

const FormItem = Form.Item;
const formLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 8, offset: 1 },
};
const Option = Select.Option;
const Network = ({ form, networkList,container }) => {
  const { getFieldDecorator,getFieldValue} = form;
  // 这些与docker 可选参数对应 请勿修改 key
  const inputParamList = [
    {
      key:'container',
      label:'Container'
    },
    {
    key: 'ipv4_address',
    label: 'IPV4 Address',
  }, {
    key: 'hostname',
    label: 'Hostname',
  }, {
    key: 'domain',
    label: 'Domain Name',
  },
    {
      key: 'mac_address',
      label: 'Mac Address',
    }
  ];
  const getContainerOption = container.map(item=>{
    return(
        <Option value={item.Name} key={item.Id}>
          {item.Name.substr(1)}
        </Option>
    )
  });
  const selectWork = getFieldValue('network["network_mode"]');

  const formBody = inputParamList.map(item => {
    if(item.key==='container'){
      if(selectWork==='container'){
        return(
          <FormItem
            label={item.label}
            key={item.key}
            {...formLayout}
          >
            {getFieldDecorator(`network[${item['key']}]`, {
              initialValue: ''
            })(
              <Select
              showSearch
              >
                {getContainerOption}
              </Select>
            )}
          </FormItem>
        )
      }
      return ;
    }
    return (
      <FormItem
        label={item.label}
        key={item.key}
        {...formLayout}
      >
        {getFieldDecorator(`network[${item['key']}]`, {
          initialValue: ''
          // rules: [
          //   { required: true },
          // ],
        })(
          <Input/>,
        )}
      </FormItem>
    );
  });
  const networkOption = networkList.map(item => {
    return (
      <Option value={item.Name} key={item.Id}>{item.Name}</Option>
    );
  });
  return (
    <div>
      <FormItem
        {...formLayout}
        label="network"
      >
        {getFieldDecorator('network["network_mode"]', {
          initialValue: 'none',
        })(
          <Select>
            {networkOption}
            <Option value="container">
              container
            </Option>
          </Select>,
        )}
      </FormItem>
      {formBody}
    </div>
  );
};
export default Network;
